<body class="hold-transition">
<div id="app">
  <div class="app-container">
    <div class="box">


      <!-- 数据表格 -->
      <el-table size="small" current-row-key="id" min-row-height="40px" :data="dataList" border>
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column label="模板名" align="center" min-width="250px">
          <template slot-scope="scope">
            <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
              {{scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="总分" align="center"></el-table-column>

        <el-table-column label="选择题" align="center" min-width="120px">
          <el-table-column prop="choiceNumber" label="题数" align="center" min-width="60px"></el-table-column>
          <el-table-column prop="choiceScore" label="总分" align="center" min-width="60px"></el-table-column>
        </el-table-column>
        <el-table-column label="填空题" align="center" min-width="120px">
          <el-table-column prop="fillNumber" label="题数" align="center" min-width="60px"></el-table-column>
          <el-table-column prop="fillScore" label="总分" align="center" min-width="60px"></el-table-column>
        </el-table-column>
        <el-table-column label="判断题" align="center" min-width="120px">
          <el-table-column prop="judgmentNumber" label="题数" align="center" min-width="60px"></el-table-column>
          <el-table-column prop="judgmentScore" label="总分" align="center" min-width="60px"></el-table-column>
        </el-table-column>
        <el-table-column label="简答题" align="center" min-width="120px">
          <el-table-column prop="shortAnswerNumber" label="题数" align="center"
                           min-width="60px"></el-table-column>
          <el-table-column prop="shortAnswerScore" label="总分" align="center"
                           min-width="60px"></el-table-column>
        </el-table-column>
        <el-table-column label="计算题" align="center" min-width="120px">
          <el-table-column prop="calculationNumber" label="题数" align="center"
                           min-width="60px"></el-table-column>
          <el-table-column prop="calculationScore" label="总分" align="center"
                           min-width="60px"></el-table-column>
        </el-table-column>
        <el-table-column label="其它题" align="center" min-width="120px">
          <el-table-column prop="otherNumber" label="题数" align="center" min-width="60px"></el-table-column>
          <el-table-column prop="otherScore" label="总分" align="center" min-width="60px"></el-table-column>
        </el-table-column>

        <el-table-column label="操作" align="center" min-width="200px">
          <template slot-scope="scope">
            <el-button v-if="userInfo.status===2" plain type="text" size="mini"
                       @click="handleUpdate(scope.row)">
              查看/编辑
            </el-button>
            <el-button v-if="userInfo.status===1" plain type="text" size="mini"
                       @click="handleUpdate(scope.row)">
              查看
            </el-button>
            <el-button plain type="text" size="mini" @click="handleDetails(scope.row)">
              详情
            </el-button>
            <el-button v-if="userInfo.status===2" plain type="text" size="mini"
                       @click="handleDelete(scope.row)" style="color: red;">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 详情弹窗 -->
      <div class="add-form">
        <el-dialog title="考试题型占比" :visible.sync="detailFormVisible" v-if="chartData" :close-on-press-escape="false"
                   :close-on-click-modal="false">
          <div ref="chart" style="width: 100%; height: 400px;"></div>
        </el-dialog>
      </div>
    </div>
  </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="/webjars/echarts/4.9.0/echarts.min.js"></script>
<script>
  var vue = new Vue({
    el: '#app',
    data: {
      dataList: [],//当前页要展示的列表数据
      detailFormVisible: false,
      chartData: null
    },

    methods: {
      handleDetails(row) {
        this.detailFormVisible = true;
        // 处理数据
        const data = [];
        if (row.choiceScore > 0) {
          data.push({
            name: '选择题',
            value: row.choiceScore
          });
        }
        if (row.fillScore > 0) {
          data.push({
            name: '填空题',
            value: row.fillScore
          });
        }
        if (row.judgmentScore > 0) {
          data.push({
            name: '判断题',
            value: row.judgmentScore
          });
        }
        if (row.shortAnswerScore > 0) {
          data.push({
            name: '简答题',
            value: row.shortAnswerScore
          });
        }
        if (row.calculationScore > 0) {
          data.push({
            name: '计算题',
            value: row.calculationScore
          });
        }
        if (row.otherScore > 0) {
          data.push({
            name: '其它题',
            value: row.otherScore
          });
        }
        // 绘制饼状图
        this.chartData = echarts.init(this.$refs.chart);
        this.chartData.setOption({
          series: [{
            name: '模板题型占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: {
              formatter: '{b}: {d}%'
            },
            data: data
          }]
        });
      }

    }
  })
</script>